<template>
  <a-row :gutter="18" style="margin-top: 10px">
    <a-col :span="24" v-for="(item, index) in list" :key="index">
      <!-- <a-card
        hoverable
        style="margin-bottom: 20px; background-color: var(--vp-c-bg-soft)"
      >
        <template #cover>
          <div>
            <a-image-preview-group>
              <div class="imgBox">
                <a-image
                  v-for="(url, idx) in item.imgUrl"
                  :key="idx"
                  :src="url"
                  style="flex: 1; width: 100%; object-fit: cover"
                  width="100%"
                />
              </div>
            </a-image-preview-group>
          </div>
        </template>
        <a-card-meta :title="item.title">
          <template #description>{{ item.description }}</template>
        </a-card-meta>
      </a-card> -->

      <a-card
        hoverable
        :body-style="{ padding: '0px', overflow: 'hidden' }"
        style="margin-bottom: 20px; background-color: var(--vp-c-bg-soft)"
      >
        <a-row>
          <a-col :span="20">
            <a-image-preview-group>
              <div class="imgBox">
                <a-image
                  v-for="(url, idx) in item.imgUrl"
                  :key="idx"
                  :src="url"
                  width="100%"
                  height="100%"
                />
              </div>
            </a-image-preview-group>
          </a-col>
          <a-col :span="4">
            <a-flex vertical :style="{ padding: '16px' }">
              <div class="title">{{ item.title }}</div>
              <div>{{ item.description }}</div>
            </a-flex>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
interface List {
  imgUrl: string;
  title: string;
  description: string;
}
const props = defineProps({
  list: {
    type: Array as () => List[],
    default: () => [],
  },
});

// console.log(props.list);
</script>

<style scoped>
.imgBox {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.title {
  letter-spacing: -0.01em;
  line-height: 24px;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 8px;
}
</style>
